<!DOCTYPE HTML>
<html>
<!--
Test that css-logic calculates CSS specificity properly
-->
<head>
  <meta charset="utf-8">
  <title>Test css-logic specificity</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
</head>
<body style="background:blue;">
  <script type="application/javascript;version=1.8">

  window.onload = function() {
    var {utils: Cu, classes: Cc, interfaces: Ci} = Components;

    const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
    const {CssLogic, CssSelector} = require("devtools/server/css-logic");
    const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
                       .getService(Ci.inIDOMUtils);

    const TEST_DATA = [
      {text: "*", expected: 0},
      {text: "LI", expected: 1},
      {text: "UL LI", expected: 2},
      {text: "UL OL + LI", expected: 3},
      {text: "H1 + [REL=\"up\"]", expected: 257},
      {text: "UL OL LI.red", expected: 259},
      {text: "LI.red.level", expected: 513},
      {text: ".red .level", expected: 512},
      {text: "#x34y", expected: 65536},
      {text: "#s12:not(FOO)", expected: 65537},
      {text: "body#home div#warning p.message", expected: 131331},
      {text: "* body#home div#warning p.message", expected: 131331},
      {text: "#footer :not(nav) li", expected: 65538},
      {text: "bar:nth-child(n)", expected: 257},
      {text: "li::-moz-list-number", expected: 1},
      {text: "a:hover", expected: 257}
    ];

    function createDocument() {
      let text = TEST_DATA.map(i=>i.text).join(",");
      text = '<style type="text/css">' + text + " {color:red;}</style>";
      document.body.innerHTML = text;
    }

    function getExpectedSpecificity(selectorText) {
      return TEST_DATA.filter(i => i.text === selectorText)[0].expected;
    }

    SimpleTest.waitForExplicitFinish();

    createDocument();
    let cssLogic = new CssLogic(DOMUtils.isInheritedProperty);

    cssLogic.highlight(document.body);
    let cssSheet = cssLogic.sheets[0];
    let cssRule = cssSheet.domSheet.cssRules[0];
    let selectors = CssLogic.getSelectors(cssRule);

    info("Iterating over the test selectors")
    for (let i = 0; i < selectors.length; i++) {
      let selectorText = selectors[i];
      info("Testing selector " + selectorText);

      let selector = new CssSelector(cssRule, selectorText, i);
      let expected = getExpectedSpecificity(selectorText);
      let specificity = DOMUtils.getSpecificity(selector.cssRule,
                                                selector.selectorIndex)
      is(specificity, expected,
        'Selector "' + selectorText + '" has a specificity of ' + expected);
    }

    info("Testing specificity of element.style");
    let colorProp = cssLogic.getPropertyInfo("background");
    is(colorProp.matchedSelectors[0].specificity, 0x01000000,
       "Element styles have specificity of 0x01000000 (16777216).");

    SimpleTest.finish();
  }

  </script>
</body>
</html>
